<template>
    <el-dialog :modelValue="props.roleVisible" title="分配角色" :before-close="close">
        <el-select v-model="roleId" multiple placeholder="请选择" style="width: 240px" @change="handlerole">
            <el-option v-for="item in props.roleList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button type="primary" @click="submit">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import {ref, reactive, watch, } from 'vue';
const emit = defineEmits(['close', 'refresh','submit'])
const props = defineProps({
    roleVisible: Boolean,
    userId:Number,
    roleList: {
        type: Array,
        default() {
            return []
        }
    },
    personRole: {
        type: Array,
        default() {
            return []
        }
    }
})
 const roleId=ref([])
 watch(()=>props.personRole,(val)=>{
    if (val.length>0) {
        let arr=[]
        val.forEach((item)=>{
         arr.push(item.id)
         roleId.value=[...arr]
        })
        
    }else{
        roleId.value=[]
    }
 })
// 点击关闭
const close = () => {
    emit('close', 'assignroles')
    emit('refresh')
}
const submit = () => {
emit('submit',roleId.value,props.userId)
emit('close')
}

const handlerole = (val) => {

}
</script>
<style scoped lang="scss"></style>